<template>
  <view class="header">
    <view class="hd">
      <view class="hdLet">
        <i class="iconfont icon-a-map"></i>
        {{getStoreName}}
      </view>

      <view class="hdRig">当前店铺</view>
    </view>

    <view class="search-box flex-y-center">
      <view class="search-icon">
        <u-icon name="search" size="30" color="#9b9b9b"></u-icon>
      </view>
      <u-input
        height="100%"
        v-model="inputValue"
        @confirm="$emit('search', inputValue)"
        placeholder="请输入店铺名称"
        class="search-input"
      ></u-input>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return null;
      },
    },
  },

  computed: {
	  getStoreName(){
		  return uni.getStorageSync('storeName')
	  }
  },

  data() {
    return {
      inputValue: "",
    };
  },
};
</script>

<style lang="less" scoped>
.header {
  padding: 18rpx 24rpx;
  background-color: #fff;

  .hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16rpx;
  }

  .hdLet {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #262626;
    font-weight: bold;

    .iconfont {
      font-weight: normal;
      font-size: 40rpx;
    }
  }

  .hdRig {
    text-align: center;
    width: 148rpx;
    height: 54rpx;
    line-height: 54rpx;
    font-size: 24rpx;
    color: #262626;
    background: #f5f6f5;
    border-radius: 32px;
    font-size: 24rpx;
    color: #262626;
  }
}

.search-box {
  padding: 0 20rpx;
  margin: 12rpx auto;
  width: 702rpx;
  height: 64rpx;
  border-radius: 32rpx;
  background: #f2f2f2;
  .search-icon {
    margin-right: 20rpx;
  }
  .search-input {
    flex: 1;
    width: 0;
  }
}
</style>
